<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="session-id" th:content="${currentSession.id}" />
    <title>中德华建智能助手</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.3.2/css/bootstrap.min.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <!-- 添加流式响应样式 -->
    <link rel="stylesheet" th:href="@{/css/streaming-styles.css}">
<!--    <link rel="stylesheet" href="css/index.css">-->
<!--    <link rel="stylesheet" href="css/bootstrap.min.css">-->
    <style>

    </style>
</head>
<body>
<div class="app-container">
    <!-- 顶部导航栏 
    <div class="header">
        <div class="d-flex align-items-center">
            <button id="sidebarToggle" class="d-md-none btn btn-link text-white me-2 p-0">
                <i class="fas fa-bars"></i>
            </button>
            <h5 class="mb-0 d-flex align-items-center">
                <i class="fas fa-robot me-2"></i>中德华建智能助手
            </h5>
            <div class="ms-auto d-flex align-items-center">
                <span th:text="${#temporals.format(#temporals.createNow(), 'yyyy年MM月dd日')}"></span>
            </div>
        </div>
    </div>
    -->

    <!-- 主体内容 -->
    <div class="app-body">
        <!-- 侧边栏 -->
        <div class="sidebar" id="sidebar">
            <div class="sidebars">
                <div class="logo">
                    <img th:src="@{/images/logo1.png}">
                </div>
                <div class="unpack">
                    <img th:src="@{/images/unpack.png}">
                </div>
            </div>
            <div class="sidebar-header">
                <form th:action="@{/chat/new}" method="post" class="mb-0">
                    <button type="submit" class="btn btn-primary w-100">
                        <img th:src="@{/images/jia.png}"><span class="d-none d-md-inline">新建对话</span>
                    </button>
                </form>
            </div>

            <div class="sidebar-title">
            历史对话
            </div>

            <div class="session-list">
                <a th:each="chatSession : ${chatSessions}"
                   th:href="@{'/chat/' + ${chatSession.id}}"
                   th:class="${chatSession.id == currentSession.id} ? 'session-item active' : 'session-item'">
                    <i class="fas fa-comments"></i>
                    <div class="content">
                        <div class="session-name" th:text="${chatSession.name}"></div>
                        <div class="session-preview" th:if="${!chatSession.messages.empty}"
                             th:text="${chatSession.getSummary(30)}"></div>
                    </div>
                    <span class="timestamp" th:if="${!chatSession.messages.empty}"
                          th:text="${#temporals.format(chatSession.getLastMessage().timestamp, 'MM-dd HH:mm')}">
                    </span>
                    <button class="delete-btn" th:data-id="${chatSession.id}" title="删除会话">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </a>
            </div>
        </div>

        <!-- 聊天区域 -->
        <div class="chat-area">
            <div class="chat-header">
                <h4>
                    <span th:text="${currentSession.name}">对话</span>
                </h4>
                <div class="actions">
                    <button class="btn-action" id="toggleReasoning" title="隐藏推理过程">
                        <i class="fas fa-eye-slash"></i>
                    </button>
                    <button class="btn-action" id="exportChat" title="导出对话">
                        <i class="fas fa-download"></i>
                    </button>
                    <button class="btn-action" id="clearChat" title="清空对话">
                        <i class="fas fa-eraser"></i>
                    </button>
                </div>
            </div>

            <div class="message-list" id="messageList">
                <!-- 欢迎界面 - 没有消息时显示 -->
                <div th:if="${currentSession.messages.empty}" class="welcome-screen">
                    <div class="zdhj">
                        <img th:src="@{/images/logo2.png}">
                        <h2>欢迎使用中德华建智能助手</h2>
                        <p>这是一款基于DeepSeek的人工智能助手，可以帮助您回答问题、提供信息、分析文件。</p>
                    </div>
                    <div class="welcome-features">
                        <div class="feature-card zndh">
                            <h5>智能对话</h5>
                            <p>自然流畅的对话体验，快速解答您的问题</p>
                        </div>
                        <div class="feature-card wjfx">
                            <h5>文件分析</h5>
                            <p>支持上传文件进行分析和内容提取</p>
                        </div>
                        <div class="feature-card dhjl">
                            <h5>对话记录</h5>
                            <p>自动保存所有对话记录，方便随时查看</p>
                        </div>
                    </div>
                </div>

                <!-- 消息列表 -->
                <div th:if="${!currentSession.messages.empty}">
                    <!-- 日期分割线 -->
                    <div class="message-date-divider" id="today">
                        <span th:text="${#temporals.format(#temporals.createNow(), 'yyyy年MM月dd日')}">今天</span>
                    </div>

                    <!-- 消息记录 -->
                    <div th:each="message : ${currentSession.messages}" class="message-container">
                        <div th:if="${message.role == 'user'}" class="message-avatar user">
                            <i class="fas fa-user"></i>
                        </div>
                        <div th:if="${message.role == 'assistant'}" class="message-avatar">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div th:if="${message.role == 'system'}" class="message-avatar system">
                            <i class="fas fa-cog"></i>
                        </div>

                        <div class="message-content">
                            <div th:class="'message-bubble ' + ${message.role}">
                                <div th:utext="${messageFormatter.format(message.content)}"></div>
                            </div>
                            <div class="message-meta">
                                <span th:text="${#temporals.format(message.timestamp, 'HH:mm:ss')}"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 正在输入指示器 -->
<!--                <div id="typingIndicator" class="typing-indicator">-->
<!--                    <div class="message-container">-->
<!--                        <div class="message-avatar">-->
<!--                            <i class="fas fa-robot"></i>-->
<!--                        </div>-->
<!--                        <div class="message-content">-->
<!--                            <div class="message-bubble assistant">-->
<!--                                正在思考<div class="dots">-->
<!--                                <span></span><span></span><span></span>-->
<!--                            </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <button id="stopGeneration" class="btn-stop-generation" style="display: none;" title="停止生成">
                    <i class="fas fa-stop"></i>
                </button>
            </div>

            <!-- 输入区域 -->
            <div class="message-input-container">
                <div id="pendingFilesContainer" class="pending-files-container" style="display:none;">
                    <div class="pending-files-header">
                        <span>待发送文件</span>
                        <button type="button" id="clearPendingFiles" class="btn-clear-files">
                            <i class="fas fa-trash"></i> 清除全部
                        </button>
                    </div>
                    <div id="pendingFilesList" class="pending-files-list">
                        <!-- 这里将动态添加文件预览 -->
                    </div>
                </div>
                <div class="message-input-wrapper">
                    <textarea id="messageInput" class="message-input"
                              placeholder="请输入您的问题..." rows="1"></textarea>
                    <button id="sendButton" class="btn-send" disabled>
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>

                <div class="file-upload-container">
                    <div>
                        <button type="button" id="fileUploadButton" class="btn-file-upload">
                            <i class="fas fa-paperclip me-1"></i>上传文件
                        </button>
                        <span id="fileInfo" class="file-info"></span>
                    </div>

                    <div class="input-tools">
                        <button class="input-tool-btn" id="clearInputBtn" title="清空输入">
                            <i class="fas fa-times"></i>
                        </button>
                        <button class="input-tool-btn" id="helpBtn" title="帮助">
                            <i class="fas fa-question-circle"></i>
                        </button>
                    </div>
                </div>
                <!-- 在现有文件上传控件下方添加 -->
                <div class="file-processing-status" style="display:none;">
                    <div class="card mt-2">
                        <div class="card-header bg-info text-white">
                            <i class="fas fa-cogs"></i> 文件处理状态
                        </div>
                        <div class="card-body">
                            <div id="processingProgress" class="mb-2">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                                </div>
                            </div>
                            <div id="processingStatus" class="small text-muted"></div>
                        </div>
                    </div>
                </div>

                <form id="fileUploadForm" enctype="multipart/form-data" style="display: none;">
                    <input type="file" id="fileInput" />
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 提示框容器 -->
<div class="toast-container" id="toastContainer"></div>

<!-- 重命名模态框 -->
<div class="modal-backdrop" id="renameModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h5 class="modal-title">重命名对话</h5>
            <button type="button" class="modal-close" id="closeRenameModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="mb-3">
                <label for="chatName" class="form-label">对话名称</label>
                <input type="text" class="form-control" id="chatName">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="modal-btn" id="cancelRename">取消</button>
            <button type="button" class="modal-btn modal-btn-primary" id="confirmRename">确定</button>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal-backdrop" id="deleteModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h5 class="modal-title">删除确认</h5>
            <button type="button" class="modal-close" id="closeDeleteModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <p>确定要删除此对话吗？此操作不可恢复。</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="modal-btn" id="cancelDelete">取消</button>
            <button type="button" class="modal-btn modal-btn-danger" id="confirmDelete">删除</button>
        </div>
    </div>
</div>

<!-- 清空确认模态框 -->
<div class="modal-backdrop" id="clearModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h5 class="modal-title">清空确认</h5>
            <button type="button" class="modal-close" id="closeClearModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <p>确定要清空此对话中的所有消息吗？此操作不可恢复。</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="modal-btn" id="cancelClear">取消</button>
            <button type="button" class="modal-btn modal-btn-danger" id="confirmClear">清空</button>
        </div>
    </div>
</div>

<!-- 帮助模态框 -->
<div class="modal-backdrop" id="helpModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <h5 class="modal-title">使用帮助</h5>
            <button type="button" class="modal-close" id="closeHelpModal">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="modal-body">
            <h6><i class="fas fa-lightbulb text-warning me-2"></i>智能助手能做什么</h6>
            <ul class="mb-3">
                <li>回答您的各类问题</li>
                <li>分析上传文件内容</li>
                <li>提供工作建议和方案</li>
                <li>协助文档编写和整理</li>
            </ul>

            <h6><i class="fas fa-keyboard text-primary me-2"></i>快捷键</h6>
            <ul class="mb-3">
                <li><kbd>Enter</kbd>: 发送消息</li>
                <li><kbd>Shift</kbd> + <kbd>Enter</kbd>: 换行</li>
                <li><kbd>Esc</kbd>: 清空输入框</li>
            </ul>

            <h6><i class="fas fa-question-circle text-success me-2"></i>小技巧</h6>
            <ul class="mb-0">
                <li>问题描述越具体，回答越准确</li>
                <li>可以上传文件请求AI进行分析</li>
<!--                <li>点击对话标题可以重命名对话</li>-->
                <li>所有聊天记录会自动保存</li>
                <li>可以点击眼睛图标查看AI推理过程</li>
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="modal-btn modal-btn-primary" id="closeHelp">我知道了</button>
        </div>
    </div>
</div>
<!-- 添加到HTML的head部分 -->
<!-- Prism.js 代码高亮 -->
<!-- 先加载依赖库 -->
<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap/bootstrap.bundle.min.js}"></script>
<script th:src="@{/js/sockjs/sockjs.min.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp-websocket/2.3.4/stomp.min.js"></script>
<script th:src="@{/js/prism/prism.min.js}"></script>
<script th:src="@{/js/marked/marked.min.js}"></script>

<!-- 可以添加更多你需要的语言 -->
<script th:src="@{/webjars/bootstrap/5.3.2/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/webjars/sockjs-client/1.5.1/sockjs.min.js}"></script>
<script th:src="@{/webjars/stomp-websocket/2.3.4/stomp.min.js}"></script>
<script th:src="@{/js/marked/marked.min.js}"></script>
<script th:src="@{/js/index.js}"></script>
<script th:src="@{/js/global-functions.js}"></script>
<script th:src="@{/js/stream-chat.js}"></script>

<script>
    // 确保输入框始终存在的修复脚本
    function ensureInputBoxExists() {
        const messageInputContainer = document.querySelector('.message-input-container');
        const messageInputWrapper = document.querySelector('.message-input-wrapper');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');

        if (!messageInput || messageInput.style.display === 'none') {
            console.log('输入框不存在或被隐藏，正在尝试恢复...');

            // 如果整个容器都不存在，重建它
            if (!messageInputContainer) {
                console.log('重建整个输入容器');
                const chatArea = document.querySelector('.chat-area');
                if (chatArea) {
                    const newContainer = document.createElement('div');
                    newContainer.className = 'message-input-container';
                    newContainer.innerHTML = `
          <div class="message-input-wrapper">
            <textarea id="messageInput" class="message-input" placeholder="请输入您的问题..." rows="1"></textarea>
            <button id="sendButton" class="btn-send" disabled>
              <i class="fas fa-paper-plane"></i>
            </button>
          </div>
          <div class="file-upload-container">
            <div>
              <button type="button" id="fileUploadButton" class="btn-file-upload">
                <i class="fas fa-paperclip me-1"></i>上传文件
              </button>
              <span id="fileInfo" class="file-info"></span>
            </div>
            <div class="input-tools">
              <button class="input-tool-btn" id="clearInputBtn" title="清空输入">
                <i class="fas fa-times"></i>
              </button>
              <button class="input-tool-btn" id="helpBtn" title="帮助">
                <i class="fas fa-question-circle"></i>
              </button>
            </div>
          </div>
        `;
                    chatArea.appendChild(newContainer);

                    // 重新绑定事件
                    initInputEvents();
                }
            }
            // 如果只是输入框不见了
            else if (messageInputWrapper && !messageInput) {
                console.log('只重建输入框');
                const newInput = document.createElement('textarea');
                newInput.id = 'messageInput';
                newInput.className = 'message-input';
                newInput.placeholder = '请输入您的问题...';
                newInput.rows = 1;

                // 添加新的发送按钮
                const newSendButton = document.createElement('button');
                newSendButton.id = 'sendButton';
                newSendButton.className = 'btn-send';
                newSendButton.disabled = true;
                newSendButton.innerHTML = '<i class="fas fa-paper-plane"></i>';

                messageInputWrapper.appendChild(newInput);
                messageInputWrapper.appendChild(newSendButton);

                // 重新绑定事件
                newInput.addEventListener('input', function() {
                    this.style.height = 'auto';
                    this.style.height = (this.scrollHeight) + 'px';
                    newSendButton.disabled = this.value.trim() === '';
                });

                newSendButton.addEventListener('click', function() {
                    if (newInput.value.trim() !== '') {
                        if (window.sendStreamingMessage) {
                            window.sendStreamingMessage(newInput.value.trim());
                        } else if (window.sendMessage) {
                            window.sendMessage();
                        }
                    }
                });
            }
            // 如果输入框只是被隐藏了
            else if (messageInput.style.display === 'none') {
                console.log('恢复被隐藏的输入框');
                messageInput.style.display = '';
                if (sendButton) sendButton.style.display = '';
            }
        }
    }

    // 每秒检查一次输入框是否存在
    setInterval(ensureInputBoxExists, 1000);

    // 消息处理完成后也检查一次
    if (window.handleGenerationComplete) {
        const originalHandler = window.handleGenerationComplete;
        window.handleGenerationComplete = function() {
            originalHandler.apply(this, arguments);
            setTimeout(ensureInputBoxExists, 100);
        };
    }
</script>

</body>
</html>